<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LED滚动字幕</title>
</head>

<style>
  .scrollText {
    white-space: nowrap;
  }

  body {
    overflow-x: hidden;
    overflow-y: hidden;
  }
</style>

<body>
  <input type="text" id="content">
  <input id="play" type="button" value="提交">

  <div id="display"></div>
  <!-- <div class="scrollText"></div> -->


</body>

<script type="text/javascript">
  function scroll() {
    //获取、添加到页面
    var a = document.getElementById('content').value;
    var nodeDiv = document.createElement('p');
    nodeDiv.classList.add('scrollText');
    nodeDiv.innerHTML = a;
    var display = document.getElementById('display');
    display.appendChild(nodeDiv);
    //只提交一次
    this.disabled = true;
    //动态改变

    var scrollText = document.getElementsByClassName('scrollText');
    scrollText[0].style.position = "absolute";
    scrollText[0].style.left = '1519px';
    scrollText[0].style.top = '-250px';
    scrollText[0].style.fontSize = '450px';
    moveMessage();
  }

  function moveMessage() {
    var scrollText = document.getElementsByClassName('scrollText');
    var len = scrollText[0].innerHTML.length;
    console.log(len +','+scrollText[0].style.fontSize);
    var messageLength = parseInt(scrollText[0].style.fontSize) * len;
    var screenSize = 1519;
    var x = parseInt(scrollText[0].style.left); //只变这个
    if (x <= screenSize) {
      x -= 5;
    }
    console.log(messageLength);
    if (x <= -messageLength) {
      x = screenSize;
    }
    scrollText[0].style.left = x + 'px';
    setTimeout('moveMessage()', 10);
  }
  document.getElementById('play').onclick = scroll;
</script>

</html>